<template>
	<view class="balance" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="head-wrap" :style="'background-color: #00dd83;'">
			<view :style="{ background: 'url('+ $xyfun.image('/static/images/balance_bg.png') + ') no-repeat right bottom/auto 260rpx' }">
				<view class="money p-lr-50 tc-w">
					<view class="ts-40 tb p-t-50">{{user.info.money||0.00}}</view>
					<view class="title ts-26 m-t-15">积分余额（元）</view>
				</view>
			</view>
		</view>
		
		<view class="menu br-10 p-30">
			<view class="item flex tb">充值积分</view>
			<view class="item input-box m-t-30 flex bl-b" :style="'border-color:#00dd83;'">
				<view class="ts-48 tb">¥</view>
				<input class="m-l-20" v-model="money" />
			</view>
			<view class="pay-list m-t-20">
				<view class="item flex p-tb-30 m-b-2 lh-50" :style="'background-color: #ffffff;'" v-for="(item, index) in payList" :key="index" v-if="item.state">
					<view class="l flex">
						<text :class="'xyicon icon-'+item.icon+' ts-40 m-r-15'"></text>
						<text class="lh-50">{{item.name}}</text>
					</view>
					<view class="r tb m-l-auto" @tap="payMethodSelect(index)">
						<text class="xyicon icon-radio-a ts-32 lh-50" v-if="item.select"></text>
						<text class="xyicon icon-radio ts-32 lh-50" v-else></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-fixed p-b-50 m-b-40" :style="'background-color: #f7f7f7;'">
			<button :style="'background-color: #00dd83;'" class="ts-30 lh-30 p-25 tc-w m-b-50 m-lr-30" @tap="createOrder()">确认充值</button>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import graceChecker from '@/utils/graceChecker';
	import Pay from '@/utils/pay';
	export default {
		components: {
		},
		data() {
			return {

				money:'',
				payList:[{
					name: '微信支付',
					method: 'wechat',
					icon: 'wechat',
					state: true,
					select: true
				}]
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {

		},
		onShow() {
			//刷新用户信息
			if(this.user.isLogin){
				this.getUserInfo();
			}
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			
			//创建充值订单
			createOrder(){
				
				var that = this;
				if (this.disabled) {
					return;
				}
				this.disabled = true;
				
				var data = {
					money:that.money,
				};
				
				//定义表单规则
				var rule = [
					{ name: 'money', checkType: 'reg',checkRule:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^[0-9]\.[0-9]([0-9])?$)/, errorMsg: '请输入正确的充值积分' },
				];
				
				//进行表单检查
				var checkRes = graceChecker.check(data, rule);
				
				if (checkRes) {
					var pay_type = '';
					this.payList.map((value) => {
					　　if(value.select){
							pay_type = value.method;
						}
					});
					if (!pay_type) {
						this.$xyfun.msg('请选择支付方式');
					}else{
						// 提交订单
						this.$api.post({
							url: '/recharge_order/add',
							data: {
								money:this.money,
								pay_type:pay_type,
							},
							loadingTip: '提交订单中...',
							success: res => {
								//发起支付
								var pay = new Pay(pay_type, res, 'recharge');
								pay.payMehod().then((res)=>{
									this.disabled = false;
									pay.payResult(res);
								},(res)=>{
									this.disabled = false;
									if(pay_type != 'balance'){
										pay.payResult(res);
									}
								});
							},
							fail: res => {
								console.log(res);
								that.disabled = false;
							}
						});
					}
				} else {
					that.$xyfun.msg(graceChecker.error);
					that.disabled = false;
				}
				
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.head-wrap{
		border-radius: 0 0 30% 30%;height: 300rpx;
		.money{height: 300rpx;}
	}
	.menu{
		position: absolute;width: 630rpx;top: 220rpx;left: 30rpx;background: #fff;
		.input-box{line-height: 80rpx;}
		input{width: 550rpx;height: 80rpx;line-height: 80rpx;}
	}
</style>